<template>
  <div class="search-input">
    <ElInput
      class="search-input-inner"
      :prefix-icon="Search"
      :="attrs"
      @keyup="onKeyUp"
    />
    <div v-if="props.showTrigger" class="search-input-trigger" @click="onTrigger">
      <i class="iconfont icon-advanced_search search-input-icon"></i>
    </div>
    <div v-if="props.showColumns && props.columns.length" class="search-input-trigger">
      <el-popover
        placement="bottom"
        :width="400"
        trigger="hover"
      >
        <template #reference>
          <i class="iconfont icon-parameter_management search-input-icon"></i>
        </template>
        <div>
          <ElScrollbar class="dialog-form-body" max-height="500px">
            <ElTable :data="columns">
              <ElTableColumn label="#" :width="50" align="center" type="index" />
              <ElTableColumn label="列名" prop="label"/>
              <ElTableColumn label="显示/隐藏" prop="prop" :width="100">
                <template #default="{ row }">
                  <ElSwitch
                    :model-value="!hiddenColumns.has(row.prop)"
                    @update:model-value="changeColumn(row.prop)"
                  />
                </template>
              </ElTableColumn>
            </ElTable>
          </ElScrollbar>
        </div>
      </el-popover>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue'
import { Search } from '@element-plus/icons-vue'

const attrs = useAttrs()

interface Props {
  isCollapse: boolean;
  showTrigger: boolean;
  data: object;
  showColumns: boolean;
  columns: Array<{ prop: string, label: string }>;
  hiddenColumns: Set<string>;
}
const props = withDefaults(defineProps<Props>(), {
  isCollapse: false,
  showTrigger: true,
  showColumns: true,
  data: () => ({}),
  columns: () => [],
  hiddenColumns: () => new Set<string>()
})

const emit = defineEmits<{
  trigger: [trigger: boolean],
  search: [],
  'change-column': [string]
}>()

const onTrigger = () => {
  emit('trigger', !props.isCollapse)
}

const onKeyUp = (event) => {
  if (event.key === 'Enter') {
    emit('search')
  }
}

const changeColumn = prop => {
  emit('change-column', prop)
}
</script>

<style scoped lang="scss">
.search-input {
  display: flex;
  align-items: center;
  &-inner {
    width: 306px;
  }
  &-trigger {
    box-sizing: border-box;
    margin-left: 9px;
    width: 30px;
    height: 30px;
    background: var(--el-color-primary-light-9);
    border: 1px solid var(--el-color-primary);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &-icon {
    font-size: 16px;
    color: var(--el-color-primary);
  }
}
</style>
